<template>
    <div>
        <n-form ref="formRef" :label-width="80" :model="formValue">
            <n-form-item label="翻译引擎" path="user.name">
                <!-- <n-input v-model:value="formValue.translator" placeholder="Engine" /> -->
                <n-select v-model:value="formValue.translator" :options="translatorList" />
            </n-form-item>
            <n-form-item label="存储引擎" path="storageEngine">
                <!-- <n-input v-model:value="formValue.translator" placeholder="Engine" /> -->
                <n-select v-model:value="formValue.storageEngine" :options="storageEngineList" />
            </n-form-item>

            <!-- <n-form-item label="备份数据" >
                 <n-button @click="downloadBackup">
                下载备份数据</n-button>
            </n-form-item> -->
            <n-button @click="handleSubmit">
                保存
            </n-button>
        </n-form>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { TranslatorFactory } from '../services/translate/TranslatorFactory';
import { useMessage, type SelectOption } from 'naive-ui';

const message = useMessage()

const translatorFactory = new TranslatorFactory();

const formRef = ref()
const formValue = ref({
    translator: 'xxApi',
    storageEngine: 'local'
})
const translatorList = ref<SelectOption[]>([])
const storageEngineList: SelectOption[] = [
    {
        label: '浏览器本地存储',
        value: 'local'
    }, {
        label: '云端存储(需要登录账号)',
        value: 'cloud'
    }
]

for (let [id, value] of translatorFactory.getAllTranslators()) {

        translatorList.value.push({
            label: value.getName(),
            value: id,
            disabled:!value.valid()
        })
}

function handleSubmit() {
    localStorage.setItem('translator', formValue.value.translator)
    localStorage.setItem('storageEngine', formValue.value.storageEngine)
    message.success('保存成功')
}
/**
 * 使用LocalStorageWordDao获取全部words，保存成json格式，并提供下载，让浏览器下载
 */
// async function downloadBackup() {
//     try {
//         // 动态导入 LocalStorageWordDao，避免循环依赖
//             const wordDao = new LocalStorageWordDao();

//             // 获取所有单词数据
//             const allWords = await wordDao.getAllWords();
//             console.log(allWords);

//             // 转换为JSON格式
//             const jsonData = JSON.stringify(allWords, null, 2);

//             // 创建Blob对象
//             const blob = new Blob([jsonData], { type: 'application/json' });

//             // 创建下载链接
//             const url = URL.createObjectURL(blob);
//             const link = document.createElement('a');
//             link.href = url;
//             link.download = `word-backup-${new Date().toISOString().slice(0, 10)}.json`;

//             // 触发下载
//             document.body.appendChild(link);
//             link.click();

//             // 清理
//             document.body.removeChild(link);
//             URL.revokeObjectURL(url);

//             message.success('备份文件已开始下载');
//     } catch (error) {
//         console.error('备份下载失败:', error);
//         message.error('备份下载失败: ' + (error as Error).message);
//     }
// }
onMounted(() => {
    formValue.value.storageEngine = localStorage.getItem('storageEngine') || 'local'
    formValue.value.translator = localStorage.getItem('translator') || ''
})
</script>